<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
  <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>文章列表</title>
		<meta name="Keywords" content="微信开发,微信支付,微信demo,demo下载">
		<meta name="description" content="微信开发">
		<jsp:include page="iconfont/iconfont.jsp" flush="true"/><!--动态包含-->
		<!--css,js-->
		<jsp:include page="common/common_head.jsp"></jsp:include>
		<style>
			*{margin:0;padding:0;}
			body{background:#f7fafc;font-size:16px;}
			a{text-decoration:none;color:#333;}
			.article-list-box{background:#fff;width:1180px;box-shadow:1px 1px 17px 2px rgba(224,221,221,0.6);padding:10px;margin:0 auto 50px auto;}
			.article-list-box ul li{border-top:1px solid #efefef;padding:10px 0;}
			.article-list-box ul li .img{overflow:hidden;float:left;margin-right:10px;}
			.article-list-box ul li:hover{background:#f7fafc;}
			.article-list-box ul li img{height:96px;width:120px;transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;}
			.article-list-box ul li img:hover{transform:scale(1.3);-moz-transform:scale(1.3);-webkit-transition:scale(1.3);-o-transition:scale(1.3);}
			.article-list-box ul li .article-head{float:right;}
			.article-list-box ul li{padding-bottom:10px;}
			.article-title{font-size:18px;}
			.article-title:hover{color:red;}
			.article-cnt{font-size:14px;color:#afafaf;margin:10px 0;}
			.createtime{color:#afafaf;font-size:14px;text-align:right;}
			.goload{text-align:center;padding:8px 0;background:#efefef;display:inline-block;width:100%;}
			.goload:hover{background:#28730A;color:#fff;}
			.title-desc{background:#f7fafc;padding:10px;font-size:20px;color:#D0D0D0;}
			/** *swiper */
			 .swiper-container{width:1200px;height:400px;margin:100px auto 20px;background:#ccc;}
			.swiper-slide{background-size:cover;text-align:center;font-size:18px;height:400px;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
			.article-source{font-size:14px;background:#F3754E;color:#fff;padding:0 4px;margin-left:10px;}
		</style>
	<body>
	 <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><a href="###"><img alt="" width="1200" height="450" src="<c:url value='/resources/images/sucai/sucai_pic1.jpg'/>"></a></div>
            <div class="swiper-slide"><a href="###"><img src="http://img.imooc.com/5853ce59000184a012000460.jpg"></a></div>
			<div class="swiper-slide"><a href="###"><img src="http://img.imooc.com/5847f0e400014e9f12000460.jpg"></a></div>
        </div>
        <!-- <div class="swiper-button-prev"></div>
    	<div class="swiper-button-next"></div> -->
		 <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
	<script type="text/javascript" src="<c:url value='/resources/js/swiper/swiper-3.4.0.jquery.min.js'/>"></script>
    <script>
   var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
	    paginationBulletRender: function (index, className) {
		  return '<span style="width: 30px;height: 4px;display: inline-block;border-radius: 10%;" class="' + className + '"></span>';
	    },
        spaceBetween: 0,
        centeredSlides: true,
        autoplay: 3000,
		loop:true,
		freeMode : true,
		//freeModeMomentum : false,
		freeModeSticky : false,
        autoplayDisableOnInteraction: false
    });

   var swiper1 = new Swiper('.swiper-container1', {
        //pagination: '.swiper-pagination1',
        slidesPerView: 4,
        paginationClickable: true,
        spaceBetween: 30,
        freeMode: true
    });
    </script>
	
	
	<!-- 共用头部 -->
	<jsp:include page="common/common.jsp"></jsp:include>
	<div class="canvas_box">
		<canvas id="Mycanvas"></canvas>
	</div>
		<div id="vwrap" class="article-list-box" v-cloak>
		<p class="title-desc">微信开发好文速递</p>
			<ul class="articles-ul">
				<li v-for="article in articleList">
					<a href="###" @click="articleDetail(article.id)">
						<div class="img">
							<img alt="" :src="article.img">
						</div>
						<p class="article-head">
							<p class="article-title">{{article.title}}<span class="article-source">{{article.source}}</span></p>
							<p class="article-cnt">{{article.desc}}</p>
							<p class="createtime">{{article.createtime}}</p>
						</p>
						<div style="clear:both;"></div>
					</a>
				</li>
				
			</ul>
			<a href="javascript:;" class="goload" style="text-align:center;">加载更多</a>
		</div>
	</body>
	<script type="text/javascript">
	$(function(){
		$(".wx-nav .article").css({background:"orange",color:"#fff"});
	})
	</script>
	<script type="text/javascript" src="<c:url value='/resources/js/base/article.js'/>"></script>
</body>
</html>
